<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Administrator</title>
    <link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
<style>
.navbar-brand img {
	max-height: 30px;
}
body {
	padding-top: 70px;
}
</style>
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href=".."><img src="images/key.png"></a>
	</div>
	<div class="navbar-collapse collapse">
	  <ul class="nav navbar-nav">
		<li class="active"><a href="#">Home</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</div><!--/.navbar -->
<div class="container theme-showcase" role="main">
		<table class="table" id="temp-table">
		  <thead>
			<tr>
			  <th data-priority="1">Status</th>
			  <th data-priority="persist">Name</th>
			  <th data-priority="2">ID</th>
			  <th data-priority="3"><abbr title="IP">IP</abbr></th>
			  <th data-priority="4">Others</th>
			</tr>
		  </thead>
		  <tbody>
		  </tbody>
		</table>
</div><!--/.container -->
</body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
	$.get("list.json", {
		city: "shanghai",
		status: 1,
	}, function(data){
		var $tbody = $("table tbody");
		for(var i in data) {
			var status = data[i].status == 1 ? "online" : "offline"
			$tbody.append("<tr>"
				+ "<td><img src='images/" + status + ".png' alt='"+ status +"' title='"+ status +"'></td>"
				+ "<td><a href='setting.html?id="+ data[i].id +"'>" + data[i].name + "</a></td>"
				+ "<td>" + data[i].id + "</td>"
				+ "<td>" + data[i].ip + ":" + data[i].port + "</td>"
				+ "<td>" + "" + "</td>"
				+ "</tr>"
				);
		}
	});
});
</script>
</html>